<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>提交订单</title>
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
<meta name="format-detection" content="telephone=no">
<meta name="renderer" content="webkit">
<meta http-equiv="Cache-Control" content="no-siteapp" />
<link rel="stylesheet" href="amazeui/css/amazeui.min.css"/>
<link rel="stylesheet" href="default/style.css"/>
<script src="amazeui/js/jquery.min.js"></script>
<script src="amazeui/js/amazeui.min.js"></script>
</head>

<body>
<div class="container">
	<header data-am-widget="header" class="am-header am-header-default my-header">
      <div class="am-header-left am-header-nav">
        <a href="#left-link" class="">
          <i class="am-header-icon am-icon-chevron-left"></i>
        </a>
      </div>
      <h1 class="am-header-title">
        <a href="#title-link" class="">提交订单</a>
      </h1>
      <div class="am-header-right am-header-nav">
        <a href="#right-link" class="">
          <i class="am-header-icon  am-icon-home"></i>
        </a>
      </div>
    </header>

	<div class="gray-panel">
    	<div class="paoduct-title-panel">
        	<h2 class="checkout-h2"><span class="am-badge am-round am-badge-warning ">1</span> 确认订单信息</h2>
			<div class="cart-list-panel">
                <ul class="am-avg-sm-1 cart-panel-ul">
                    <li>
                        <div class="imgpanel"><a href="#"><img src="default/img3.jpg" class="am-img-responsive" /></a></div>
                        <div class="infopanel">
                            <h3><a href="#">450ml柔顺丰盈护发素正品</a></h3>
                            <p>品牌：乔治卡罗尔</p>
                            <p>价格：<span class="red2 bold">78.00</span> 元  X 2 &nbsp;&nbsp;&nbsp; 积分：<span class="red2 bold">78.00</span></p>
                            <p>库存：<span class="red2 bold">100</span> 件</p>
                            <p>运费：<span class="red2 bold">3</span> 元</p>
                        </div>
                    </li>
                    <li>
                        <div class="imgpanel"><a href="#"><img src="default/img3.jpg" class="am-img-responsive" /></a></div>
                        <div class="infopanel">
                            <h3><a href="#">450ml柔顺丰盈护发素正品</a></h3>
                            <p>品牌：乔治卡罗尔</p>
                            <p>价格：<span class="red2 bold">78.00</span> 元  X 1 &nbsp;&nbsp;&nbsp; 积分：<span class="red2 bold">78.00</span></p>
                            <p>库存：<span class="red2 bold">100</span> 件</p>
                            <p>运费：<span class="red2 bold">3</span> 元</p>
                        </div>
                    </li>
                </ul>
            </div>
            <div class="cart_foot">共<span class="red2 bold" id="total_good">{$total}</span>件商品；总价：<span class="red2 bold" id="total_amount">{$price}</span>元；总积分：<span class="red2 bold" id="total_jifen">{$jifen}</span></div>
            <div class="cart-tool">
                <a class="am-btn am-btn-sm am-btn-success am-radius" href="shoppingcart.html">
                  <i class="am-icon-chevron-left"></i>
                  返回购物车
                </a>
            </div>
        </div>
        <div class="my-search-title-panel am-text-sm am-margin-bottom-sm"><i class="am-icon-lightbulb-o am-text-danger"></i> 提示：实际的运费可能因为收货地址的不同而有差异，具体以提交之后系统计算或卖家协商为准</div>
        <div class="paoduct-title-panel">
        	<h2 class="checkout-h2"><span class="am-badge am-round am-badge-warning ">2</span> 确认收货地址</h2>
            <p><i class="am-icon-location-arrow"></i> 收货地址</p>
            <form class="am-form am-form-inline">
            <p><select name="" class="select-area am-radius"><option>选择省</option></select><select name="" class="select-area am-radius"><option>选择市</option></select><select name="" class="select-area am-radius"><option>选择区</option></select></p>
            <div class="am-form-group">
                <input type="text" class="am-form-field am-radius" placeholder="详细地址">
            </div>
            <hr data-am-widget="divider" style="" class="am-divider-default am-margin-bottom-sm"/>
            <div class="am-form-group am-form-icon">
                <i class="am-icon-circle"></i>
                <input type="text" class="am-form-field am-radius" placeholder="邮政编码">
            </div>
            <div class="am-form-group am-form-icon">
                <i class="am-icon-user"></i>
                <input type="text" class="am-form-field am-radius" placeholder="真实姓名">
            </div>
            <div class="am-form-group am-form-icon">
                <i class="am-icon-phone"></i>
                <input type="text" class="am-form-field am-radius" placeholder="手机号码">
            </div>
            <div class="am-form-group am-form-icon">
                <i class="am-icon-phone-square"></i>
                <input type="text" class="am-form-field am-radius" placeholder="电话号码">
            </div>
            <div class="am-form-group am-form-icon">
                <i class="am-icon-ship"></i>
                <input type="text" class="am-form-field am-radius" placeholder="期望物流">
            </div>
            <div class="am-form-group am-form-icon">
                <select><option>常见物流类型</option></select>
            </div>
            <input type="hidden" value="1" name="paytype" id="paytype">
            </form>
        </div>
        <div class="paoduct-title-panel">
        	<h2 class="checkout-h2"><span class="am-badge am-round am-badge-warning ">3</span> 支付方式</h2>
            <ul class="am-list am-text-sm my-pay-ul">
            	<li><a href="javascript:;" rel="1" class="hover"><span class="am-fr"><i class="am-icon-check-circle"></i>&nbsp;&nbsp;</span>&nbsp;&nbsp;&nbsp;&nbsp;<img src="default/wechat.png" class="payimg" />&nbsp;&nbsp;&nbsp;&nbsp;微信支付</a></li>
                <li><a href="javascript:;" rel="2"><span class="am-fr"><i class="am-icon-circle-thin"></i>&nbsp;&nbsp;</span><img src="default/alipay.png" class="payimg" /> 支付宝支付</a></li>
                <li><a href="javascript:;" rel="3"><span class="am-fr"><i class="am-icon-circle-thin"></i>&nbsp;&nbsp;</span>&nbsp;&nbsp;&nbsp;&nbsp;<img src="default/money.png" class="payimg" />&nbsp;&nbsp;&nbsp;&nbsp;余额支付 &nbsp;&nbsp; <samll class="my-pay-yue">金币余额：<span class="red2">1001</span>  &nbsp;&nbsp;<span onClick="window.location.href='#'" class="red2">充值</span></samll></a></li>
            </ul>
            <script>
			$(document).ready(function(e) {
                $(".my-pay-ul li > a").click(function(){
					$(".my-pay-ul li > a").removeClass('hover');
					$(".my-pay-ul li > a i").removeClass('am-icon-check-circle').addClass('am-icon-circle-thin');
					$(this).addClass('hover');
					var val = $(this).attr('rel');
					$("#paytype").val(val);
					$(this).find('i').removeClass('am-icon-circle-thin').addClass('am-icon-check-circle');
					
					
				});
            });
			</script>
            <div>
            	<ul class="am-avg-sm-2 am-text-center">
                	<li class="am-text-center am-padding-sm"><button type="button" class="am-btn am-btn-danger am-btn-block am-radius">提交订单</button></li>
                    <li class="am-text-center am-padding-sm"><button type="button" class="am-btn am-btn-success am-btn-block am-radius">继续购物</button></li>
                </ul>
            </div>
        </div>
    </div>
    
    <footer data-am-widget="footer" class="am-footer am-footer-default" data-am-footer="{  }">
        <hr data-am-widget="divider" style="" class="am-divider am-divider-default"/>
      <div class="am-footer-miscs ">
        <p>CopyRight©2014 AllMobilize Inc.</p>
        <p>京ICP备13033158</p>
      </div>
    </footer>
    <!--底部-->
    <div data-am-widget="navbar" class="am-navbar am-cf my-nav-footer " id="">
      <ul class="am-navbar-nav am-cf am-avg-sm-4 my-footer-ul">
        <li>
          <a href="/wap/" class="">
            <span class="am-icon-home"></span>
            <span class="am-navbar-label">首页</span>
          </a>
        </li>
        <li>
          <a href="###" class="">
            <span class=" am-icon-phone"></span>
            <span class="am-navbar-label">电话</span>
          </a>
        </li>
        <li>
          <a href="###" class="">
            <span class=" am-icon-comments"></span>
            <span class="am-navbar-label">聊天</span>
          </a>
        </li>
        <li>
          <a href="#" class="">
            <span class=" am-icon-map-marker"></span>
            <span class="am-navbar-label">地图</span>
          </a>
        </li>
        <li style="position:relative">
          <a href="javascript:;" onClick="showFooterNav();" class="">
            <span class="am-icon-user"></span>
            <span class="am-navbar-label">会员</span>
          </a>
          <div class="footer-nav" id="footNav">
          	<span class=" am-icon-bank"><a href="#">买家中心</a></span>
            <span class="am-icon-suitcase"><a href="#">卖家中心</a></span>
            <span class="am-icon-usd"><a href="#">我的钱包</a></span>
            <span class="am-icon-user"><a href="#">个人资料</a></span>
            <span class="am-icon-th-list"><a href="#">帮助中心</a></span>
            <span class="am-icon-comments"><a href="#">消息中心</a></span>
            <span class="am-icon-power-off"><a href="#">安全退出</a></span>
          </div>
        </li>
      </ul>
      <script>
	  	function showFooterNav(){
			$("#footNav").toggle();
		}
	  </script>
    </div>
</div>
</body>
</html>
